//引入nodejs内置的路径模块
const path = require("path");
//引入html插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
//引入css插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// //引入抽离css插件
// const MiniCssExtractPlugin = require("html-minifier-terser");
//引入压缩css插件
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
//引入js插件
const ParallelUglifyPlugin = require("webpack-parallel-uglify-plugin");

module.exports = {
  //入口
  entry: {
    //公共的js
    // commom:"./js/common.js",
    // api:"./js/api.js",
    // request:"./js/request.js",
    swiper: "./swiper/swiper.js",
    wow: "./swiper/wow.js",
    // animate:"./swiper/swiper.animate1.0.3.min.js",

    //各个页面用到的js
    index: {
      import: ["./js/index.js"],
      filename: "js/index.[contenthash].js",
    },

    index2: {
      import: "./js/index2.js",
    },

    case: {
      import: "./js/case.js",
    },

    aboutme: {
      import: "./js/aboutme.js",
    },

    products: {
      import: "./js/products.js",
    },
  },

  //出口
  output: {
    clean: true,
    filename: "js/[name].[contenthash].js",
  },

  mode: "production",
  devtool: false,

  //插件配置
  plugins: [
    //首页样式
    new HtmlWebpackPlugin({
      template: "index.html",
      filename: "index.html",
      inject: "body",
      chunks: ["index", "swiper", "wow"],
      chunksSortMode: "manual",
    }),

    //首页2样式
    new HtmlWebpackPlugin({
      template: "index2.html",
      filename: "index2.html",
      inject: "body",
      chunks: ["index2", "swiper", "wow"],
      chunksSortMode: "manual",
    }),

    //case样式
    new HtmlWebpackPlugin({
      template: "case.html",
      filename: "case.html",
      inject: "body",
      chunks: [ "swiper", "wow","case"],
      chunksSortMode: "manual",
    }),

    //aboutme样式
    new HtmlWebpackPlugin({
      template: "aboutme.html",
      filename: "aboutme.html",
      inject: "body",
      chunks: [ "swiper", "wow","aboutme"],
      chunksSortMode: "manual",
    }),

    //products样式
    new HtmlWebpackPlugin({
      template: "products.html",
      filename: "products.html",
      inject: "body",
      chunks: [ "swiper", "wow","products"],
      chunksSortMode: "manual",
    }),

    //css
    new MiniCssExtractPlugin({
      filename: "styles/[contenthash].css",
    }),

    //js
    // new ParallelUglifyPlugin({
    //   uglifyJS: {
    //     output: {
    //       beautify: false,
    //       comments: false,
    //     },
    //     compress: {
    //       drop_console: false,
    //       collapse_vars: true,
    //       reduce_vars: false,
    //     },
    //   },
    // }),
  ],

  module: {
    rules: [
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loader: "url-loader",

        options: {
          // 图片大小小于8kb，就会被base64处理，优点：减少请求数量（减轻服务器压力），缺点：图片体积会更大（文件请求速度更慢）
          // base64在客户端本地解码所以会减少服务器压力，如果图片过大还采用base64编码会导致cpu调用率上升，网页加载时变卡
          limit: 8000,
          // 给图片重命名，[hash:10]：取图片的hash的前10位，[ext]：取文件原来扩展名
          name: "[hash:10].[ext]",
          // 问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是conmonjs，解析时会出问题：[object Module]
          // 解决：关闭url-loader的es6模块化，使用commonjs解析
          esModule: false,
          //输出文件夹名img
          outputPath: "img",
        },

        
      },

      {
        // 处理html文件中的img图片（负责引入img，从而能被url-loader进行处理）
        test: /\.html$/,
        use: [
          {
            loader: "html-withimg-loader",
            //不设置这个可能会出现打包报错现象
            options: {
              esModule: false,
            },
          },
        ],
      },

      {
        test: /\.(c|s[ac])ss$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
    ],
  },

  optimization: {
    minimizer: [new CssMinimizerPlugin()],
  },
};
